<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>随机选择器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit"><!--360默认为极速模式打开-->
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #d1d3d4">
   <div align="center">
       <div class="container" style="width: 850px;height: 500px;margin-top: 80px;background-image: url('IMG/BJ4.png'); ">
           <div class="row">
               <h1 style="margin-top: -20px;color: #00006a;">我要变形啦！</h1>
               <div class="col-md-4">
                   <h3>输入内容</h3>
                   <div style="margin-left:20px;margin-top: 10px;float: left;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;">
                       <textarea name="text" id="in" cols="20" rows="11" style="margin-left: 5px;color: #00006a;font-size: 20px"></textarea>
                   </div>
               </div>
               <div class="col-md-4" align="center" style="padding-right: 280px;padding-top: 100px">
                   <ul>
                       <li><input type="button" value="随机抽取" class="d1" onclick=""/></li>
                       <li><input type="button" value="随机排序" class="d1" onclick="btn()"/></li>
                       <li><input type="button" id="clear" value="重置" class="d1" onclick=""/></li>
                   </ul>
               </div>
               <div class="col-md-4">
                   <h3 style="text-align: center;margin-left: 100px;margin-top: -70px">输出结果</h3>
                   <div style="-moz-opacity:0.6;opacity: 0.6;float: right;">
                       <textarea name="text" id="out" cols="20" rows="11" style="font-size: 20px;color: #d20603;filter:alpha(Opacity=60); margin-top: -120px;margin-right:-150px">
                       </textarea>
                   </div>
               </div>
           </div>
       </div>
   </div>
<script>
    $("#clear").click(function (){
        $("#in").val('');
    });
</script>
<script>
       var btn=function(){
           var In=document.getElementById('in').value;
//           var strArray=Array();
           strArray=In.split(',');
           var L=strArray.length;
           $("#out").empty();
           for(i=0;i<L;i++){
               var n;
               n=Math.floor(Math.random()*(strArray.length));
               $("#out").append((i+1)+"."+strArray[n]);
               strArray.splice(n,1);
           }
       }
</script>
</body>
</html>